<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>操作表单</title>
</head>
<body>
	<div id="test-div">
		<!-- 1:获取值 -->
		<input type="text" id="email">
		<label>
			<input type="radio" name="weekday" id="monday" value="1">Monday
		</label>
		<label>
			<input type="radio" name="weekday" id="tuesday" value="2">Tuesday
		</label>
		<!-- 2:HTML5 控件-->
		<input type="date" value="2017-08-08">
		<input type="datetime-local" value="2017-09-09T02:05:59">
		<input type="color" value="#ff0000">

		<!-- 3.1:提交表单方式1 -->
		<form id="test-form">
			名字<input id="name" name="useName">
			<button type="button" onsubmit="doSubmitForm()">Submit</button>
		</form>

		<!-- 3.2:提交表单方式2 -->
		<form id="userInfo" method="post" onsubmit="return checkUserInfo()">
			用户名<input type="text" id="user-name">
			密码<input type="password" id="input-password">
			<input type="hidden" id="md5-password" name="password">
			<button type="button">提交</button>
		</form>
	</div>
<script>
	`use strict`;
	//1:获取值
	//这种方式对 text,password,hidden,select有效
	//但对于radio,checkbox 永远返回预设值,我们要根据
	//用户是否打上勾，check来判断
	let email = document.getElementById("email");
	console.log("email:" + email.value);

	let mon = document.getElementById("monday");
	let tue = document.getElementById("tuesday");
	console.log(mon.value);
	console.log(tue.value);
	console.log(tue.checked);
	console.log(tue.checked);

	//2:设置值
	//text,password,hidden,select 直接 调用DOM对象的.value就可以了
	//radio,checkbox 设置true,false就可以了

	//3:提交表单 方式1
	function doSubmitForm() {
		let testForm = document.getElementById("test-form");
		let name = document.getElementById("name");
		console.log("name:" + name.value);
		testForm.submit();
	}

	//3:表单提交,信息校验
	function checkUserInfo() {
		let
			inputPassword = document.getElementById("input-password"),
			md5Passord = document.getElementById("md5-password");
		md5Passord.value = inputPassword.value + "加密";
		console.log("加密密码:" + md5Passord.value);
		return true;
	}
</script>
</body>
</html>